<template>
  <a-modal :title="title" :width="800" :visible="visible" :confirmLoading="confirmLoading" switchFullscreen @ok="handleOk" @cancel="handleCancel" cancelText="关闭" okText="确认拆分">

    <a-spin :spinning="confirmLoading">
      <div class="table-page-search-wrapper">
        <a-form :form="form" ref="form">
          <a-row :gutter="24">
            <a-col :xl="24" :lg="24" :md="24" :sm="24">
              <a-form-item :label-col="{ span: 3 }" :wrapper-col="{ span: 10 }" label="数据名称">
                <a-input placeholder="请输入数据名称" v-decorator="['name',validatorRules.name]"></a-input>
              </a-form-item>
              <a-form-item :label-col="{ span: 3 }" :wrapper-col="{ span: 10 }" label="本月奖金金额">
                <a-input placeholder="请输入本月奖金金额" v-decorator="['fenpeiAmount',validatorRules.fenpeiAmount]"></a-input>
              </a-form-item>
              <a-form-item :label-col="{ span: 3 }" :wrapper-col="{ span: 12 }" label="绩效考评周期">
                <a-range-picker format="YYYY-MM-DD" :placeholder="['开始时间', '结束时间']" v-decorator="['times',validatorRules.times]" />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </a-spin>
  </a-modal>
</template>

<script>
import moment from 'moment'
import { getAction, httpAction } from '@/api/manage'

export default {
  name: 'PerformanceMonthAdd',
  data() {
    return {
      title: '新增月度绩效',
      visible: false,
      confirmLoading: false,
      model: {},
      form: this.$form.createForm(this),
      validatorRules: {
        name: {
          rules: [
            {
              required: true,
              message: '请输入数据名称!'
            }
          ]
        },
        fenpeiAmount: {
          rules: [
            {
              required: true,
              validator: function(rule, value, cbfn) {
                let reg = /^[1-9][0-9]*$|^[1-9][0-9]*\.\d+$/ // 不能0开头
                if (!value.trim().length) {
                  cbfn('请输入本月奖金金额')
                } else if (!reg.test(value.trim())) {
                  cbfn('请输入本月奖金金额，为大于等于0的数字')
                }
                cbfn()
              }
            }
          ]
        },
        times: {
          rules: [
            {
              required: true,
              message: '请选择绩效考评周期'
            }
          ]
        }
      },
      enableClick: true
    }
  },
  mounted() {},
  methods: {
    edit() {
      this.visible = true
    },
    close() {
      this.$emit('ok')
      this.visible = false
    },
    handleCancel() {
      this.close()
    },
    handleOk() {
      const that = this
      if (!that.enableClick) {
        return false
      }
      that.enableClick = false
      this.form.validateFields((errs, values) => {
        values.startTime = values.times[0].format('YYYY-MM-DD')
        values.endTime = values.times[1].format('YYYY-MM-DD')
        delete values.times
        let url = '/performance/performanceMonth/split'
        httpAction(url, values, 'post').then(res => {
          if (res.success) {
            this.$message.success(res.message)
            this.$emit('addThen', res.result.id)
            this.visible = false
            this.$refs.form.resetFields()
          } else {
            that.enableClick = true
            this.$message.warning(res.message)
          }
        })
      })
    }
  }
}
</script>


<style lang="less" scoped>
@import '~@assets/less/common.less';

.table-page-search-wrapper {
  margin-top: 24px;
}
</style>

